<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<script src="assets/js/jquery.min.js"></script>
		<link rel="stylesheet" href="assets/plyr/plyr.css" />
	</head>
	<body>

		<button class="clickme" style="font-size:2em">Change media</button>

		<div class="player-container">
			<div class="plyr__video-embed" id="player">
				<iframe
					src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
					allowfullscreen
					allowtransparency
					allow="autoplay"
				></iframe>
			</div>
		</div>


		<script src="assets/plyr/plyr.min.js"></script>
		<script type="text/javascript">
			const player = new Plyr(document.getElementById('player'));
			
			$('.clickme').click(function(){
				player.source = {
					type: 'video',
					sources: [
						{
							src: 'C0DPdy98e4c',
							provider: 'youtube',
						},
					],
				};
			});
		</script>
	</body>
</html>